<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
起始位置：<input type="text" name="beginPos">
结束位置：<input type="text" name="endPos">
<input type="button" name="getPoint" value="获取位置">
距离为：<input type="text" name="distance" readonly="readonly">
<span id="msg">正在获取当前位置...</span>
<input type="button" id="getaddress" value="获取位置">
<input type="button" id="getaddress2" value="获取详细位置">


<!-- 引入百度地图api文件 -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=09c3LLs4RdXBoIPWVDb3CUNKWWkpMjbz"></script>
<!-- 引入jquery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script>
    $(function() {
        //给获取位置按钮注册事件
        $("input[name='getPoint']").bind('click', function () {
            //获取起始位置
            var beginPos = $("input[name='beginPos']").val();
            //获取结束位置
            var endPos = $("input[name='endPos']").val();
            if (beginPos != '' && endPos != '') {
                loadMap(beginPos, endPos);
            } else {
                alert('起始位置或结束位置未填写')
            }
        });
    })
    var myCity = new BMap.LocalCity();

    $("#getaddress").click(function (result) {
        myCity.get(myFun);
    })
    //
    function myFun(result){
        console.log(result)
        var cityName = result.name;
        $("#msg").html("当前位置："+cityName);
        $("input[name='endPos']").val(cityName);
    }

    function loadMap(beginPos,endPos){
        //创建一个地图实例
        var map = new BMap.Map();
        var localSearch = new BMap.LocalSearch(map);
        // 设置搜索结束时的回调函数
        localSearch.setSearchCompleteCallback(function (searchResult) {
            var pois=new Array();
            for(var i=0;i<=1;i++){
                //获取搜索结果
                var poi = searchResult[i].getPoi(0);
                console.log(poi)
                //创建标注
                var marker = new BMap.Marker(poi.point);
                console.log(marker)
                //存储点
                pois.push(poi.point);
            }
            //计算两点之间距离
            $("input[name='distance']").val((map.getDistance(pois[0],pois[1])).toFixed(2)+'米');

        });
        //搜索起始位置和结束位置
        localSearch.search([beginPos,endPos]);
    }
    $("#getaddress2").click(function (result) {

    })


</script>

</body>
</html>